var id = location.search.substr(1).split('=');
console.log(id)
var service = {};
service[id[0]] = id[1];

if (!service.service_id) {
  location.href = '../html/DesignerService.html';
}

var xhr = new XMLHttpRequest();
xhr.open('get', `https://muse.huaban.com/api/v2/services/${service.service_id}/`);
xhr.send();
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  console.log(data)
  render(data);
  rightOneRender(data);
  rightTwoRender(data);
}

function render(data) {
  var title = document.querySelector('.title');
  var p1H3 = document.querySelector('.p1 h3');
  title.innerHTML = data.name;
  p1H3.innerHTML = data.name;

  var cover = document.querySelector('.cover');
  cover.innerHTML = data.cover.map(function (item) {
    return `<img src="https://muse-img.huaban.com/${item.key}_/fw/880" alt="">`
  }).join('')

  var desc = document.querySelector('.desc');
  desc.innerHTML = data.desc.map(function (item) {
    return item.type == 'image' ? `<img src="https://muse-img.huaban.com/${item.image.key}_/fw/880" alt="">`
      : `<p>${item.text}</p>`
  }).join('')

  var unit = {
    day: '天',
    week: '周'
  }
  var complete = document.querySelector('.complete_time');
  complete.innerHTML = data.complete_in.number + unit[data.complete_in.unit]
}

function rightOneRender(data) {
  var price = document.querySelector('.price');
  price.innerHTML = data.price == 0 ? '价格面议' : `${data.price}/${data.unit}`;

  var order = document.querySelector('.order');
  order.innerHTML = data.order_count;

  var rating = document.querySelector('.rating');
  var str = '';
  var num = data.rating
  for (var i = 1; i <= num; i++) {
    str += `<i class="iconfont icon-star active"></i>`
  }
  rating.innerHTML = str;
}

function rightTwoRender(data) {
  var avatar = document.querySelector('.avatar');
  var username = document.querySelector('.username');

  avatar.src = `https://hbimg.huaban.com/${data.user.avatar.key}_/both/70x70`
  username.innerHTML = data.user.username;
  avatar.setAttribute('user_id', data.user_id);
  username.setAttribute('user_id', data.user_id);

  var responseTime = document.querySelector('.responseTime');
  responseTime.innerHTML = formate(data.user.extra.response_time);

  var desc = document.querySelector('.c3');
  desc.innerHTML = data.user.desc;
}

function formate(num) {
  var f;
  var s;
  var t;
  var day;
  if (num >= 60) {
    f = parseInt(num / 60);
    s = num % 60;
  }
  if (f >= 60) {
    t = parseInt(f / 60);
    f = f % 60;
  }
  if (t >= 24) {
    day = parseInt(t / 24);
    t = t % 24;
  }
  var unit = {
    f: '分',
    s: '秒',
    t: '时',
    day: '天'
  }
  //判断
  if (day && t && f) {
    return `${day}天${t}时${f}分${s}秒`
  } else if (t && f) {
    return `${t}时${f}分${s}秒`
  } else if (f) {
    return `${f}分${s}秒`
  } else {
    return `${num}秒`
  }
}

var c1 = document.querySelector('.c1');
c1.onclick = function () {
  var e = window.event;
  if (e.target.classList.contains("username") || e.target.classList.contains("avatar")) {
    var user_id = e.target.getAttribute("user_id");
    location.href = '../html/DesignerDetail.html?user_id=' + user_id;
  }
}